import React, { FC } from 'react'
import { TransitionProps, DISPLAY_NAME_TRANSITION } from './config'
import { CSSTransition } from 'react-transition-group'

export const Transition: FC<TransitionProps> = props => {
  const {
    children,
    classNames,
    animation,
    needWrapper,
    wrapperClassName,
    ...restProps
  } = props
  return (
    <CSSTransition classNames={classNames || animation} {...restProps}>
      {needWrapper ? (
        <div className={wrapperClassName}>{children}</div>
      ) : (
        children
      )}
    </CSSTransition>
  )
}
Transition.displayName = DISPLAY_NAME_TRANSITION
Transition.defaultProps = {
  unmountOnExit: true,
  appear: true,
  wrapperClassName: 'transition-wrapper',
}

export default Transition
